<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/css/swiper-3.4.2.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/css/supplyShoping.css">
</head>
<body>
<div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="row">
            <div class="col-md-5">
                <div class="pc-slide">
                    <div class="view">
                        <div class="swiper-container">
                            <a class="arrow-left" href="#"></a>
                            <a class="arrow-right" href="#"></a>
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <a href="" target="_blank"><img src=""
                                                                    alt=""></a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="" target="_blank"><img src=""
                                                                    alt=""></a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="" target="_blank"><img src=""
                                                                    alt=""></a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="" target="_blank"><img src=""
                                                                    alt=""></a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="" target="_blank"><img src=""
                                                                    alt=""></a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="" target="_blank"><img src=""
                                                                    alt=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="preview">
                        <a class="arrow-left" href="#"></a>
                        <a class="arrow-right" href="#"></a>
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide active-nav">
                                    <img src="" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="" alt="">
                                </div>
                                <div class="swiper-slide slide6">
                                    <img src="" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Tab Menu End-->
            </div>
            <div class="col-md-7">
                <p class="list_item_p1">Michael Kors(迈克·科尔斯) #玫红色皮质手提两用包</p>
                <div class="list_item_content">
                    <p class="content_p1 content_item">
                        <span class="content_p4">价格</span>
                        <span class="red_p4">
                            ￥255</span>
                    </p>
                    <p class="content_p2 content_item">
                        <span class="content_p4">供应商</span>
                        <span class="content_p6">由"迈克·科尔斯旗舰店"销售和发货</span>
                    </p>
                    <p class="content_p3 content_item">
                        <span class="content_p4 fl_left">规格选择</span>
                        <span class="content_p5">
                            <img src="" alt="">
                            <img src="" alt="">
                            <img src="" alt="">
                        </span>
                    </p>
                </div>
                <div class="size">
                    <span class="size_left col-md-2 col-lg-2">尺       码</span>
                    <div class="size_right  col-md-10 col-lg-10">
                        <ul class="size_item">
                            <li>m</li>
                            <li>18.9元</li>
                            <li>8000可售</li>
                            <li>
                                <ul>
                                    <li class="size_btn" id="plus">+</li>
                                    <li id="valShow" class="size_btn1">0</li>
                                    <li class="size_btn" id="minus">-</li>
                                </ul>

                            </li>
                        </ul>
                        <ul class="size_item">
                            <li>m</li>
                            <li>18.9元</li>
                            <li>8000可售</li>
                            <li>
                                <ul>
                                    <li class="size_btn" id="plus">+</li>
                                    <li id="valShow" class="size_btn1">0</li>
                                    <li class="size_btn" id="minus">-</li>
                                </ul>

                            </li>
                        </ul>
                        <ul class="size_item">
                            <li>m</li>
                            <li>18.9元</li>
                            <li>8000可售</li>
                            <li>
                                <ul>
                                    <li class="size_btn" id="plus">+</li>
                                    <li id="valShow" class="size_btn1">0</li>
                                    <li class="size_btn" id="minus">-</li>
                                </ul>

                            </li>
                        </ul>

                    </div>
                    <div class="cl"></div>
                </div>

                <div class="total">
                    <div class="col-md-3 col-lg-3 total_p3">
                        1 <span class="total_p4">件</span>
                    </div>
                    <div class="col-md-6 col-lg-6 total_p1">
                        19.9<span class="total_p4">元</span>
                    </div>
                </div>

            </div>
        </div>
        <!-- 确认订单-->
        <div class="btnBox">
            <div style="width: auto;
    display: inline-block;
    margin: 0 auto;">


            <div class="cirm">确认购买</div>
            <div class="commodity">商品导入</div>
            </div>
            </div>



        <!--商品详情-->
        <div class="shopDetails">
            <div class="shopDetails_title">
                <div class="detailsItem active">
                    商品详情
                </div>
            </div>

        </div>
    </div>
</div>



</body>
</html>

<script type="text/javascript" src="../../global/js/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../global/js/jq.js"></script>
<script type="text/javascript" src="../../global/js/swiper-3.4.2.jquery.min.js"></script>
<script type="text/javascript" src="../../global/js/plugin/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../global/js/plugin/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../../global/layui/layui.js"></script>
<script type="text/javascript" src="../../global/js/my/permission.js"></script>
<script type="text/javascript">
    $(function () {
        layui.use(['layer', 'form'], function(){
            var layer = layui.layer
                ,form = layui.form;

        });

    })
    /* 调用插件*/
    var viewSwiper = new Swiper('.view .swiper-container', {
        onSlideChangeStart: function () {
            updateNavPosition()
        }
    })

    $('.view .arrow-left,.preview .arrow-left').on('click', function (e) {
        e.preventDefault()
        if (viewSwiper.activeIndex == 0) {
            viewSwiper.slideTo(viewSwiper.slides.length - 1, 1000);
            return
        }
        viewSwiper.slidePrev()
    })
    $('.view .arrow-right,.preview .arrow-right').on('click', function (e) {
        e.preventDefault()
        if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
            viewSwiper.slideTo(0, 1000);
            return
        }
        viewSwiper.slideNext()
    })

    var previewSwiper = new Swiper('.preview .swiper-container', {
        //visibilityFullFit: true,
        slidesPerView: 'auto',
        allowTouchMove: false,
        onTap: function () {
            viewSwiper.slideTo(previewSwiper.clickedIndex)
        }
    })

    function updateNavPosition() {
        $('.preview .active-nav').removeClass('active-nav')
        var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')
        if (!activeNav.hasClass('swiper-slide-visible')) {
            if (activeNav.index() > previewSwiper.activeIndex) {
                var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
                previewSwiper.slideTo(activeNav.index() - thumbsPerNav)
            } else {
                previewSwiper.slideTo(activeNav.index())
            }
        }
    }

    /*计算数子的加减*/
    $(function () {
        $(".size").on("click", "#minus", function () {
            console.log("点击了");
            var thisMinus = parseInt($(this).siblings("#valShow").html()) - 1;
            console.log(thisMinus);
            $(this).siblings("#valShow").text(thisMinus)
        })
        $(".size").on("click", "#plus", function () {
            console.log("点击了");
            var thisMinus = parseInt($(this).siblings("#valShow").html()) + 1;
            console.log(thisMinus);
            $(this).siblings("#valShow").text(thisMinus)
        })

    })
    /*点击确定按钮*/
    $(".cirm").click(function () {
        console.log("用户点击了确定按钮")
        // 调用一个lay框
        layer.open({
            type: 1,
            title: false,
            closeBtn: 1,
            fix : false, //
            shadeClose: true,
            skin: 'yourclass',
            area: ['734px', '514px'], //宽高
            content: '<div style="padding:20px;"><div class="cirmAll"><p class="cirmAll_p1"><label for="">收件人： </label> <span class="cirmAll_p2">金咕咕</span></p><p class="cirmAll_p1"><label for="">联系电话：</label><span class="cirmAll_p2">13512345679</span></p><p class="cirmAll_p1"><label for="">收货地址：</label><span class="cirmAll_p2">山西省太原市小店区清空创新基地</span></p><p class="cirmAll_p1"><label for="">订单金额：</label><span class="cirmAll_p2">￥125.0</span></p></div><!-- 清单列表 --><div class="cirmList"><p class="cirmList_p1">清单列表</p><div class="cirmBox"><div class="cirmItem"><div class="crimIMG"><img src="" alt=""></div><p>m</p><p>19.9元</p><p>2件</p><p>共39.8元</p></div><div class="cirmItem"><div class="crimIMG"><img src="" alt=""></div><p>m</p><p>19.9元</p><p>2件</p><p>共39.8元</p></div></div></div><div class="cirm">微信支付</div></div>'
        });
    })
</script>